import 'package:flutter/material.dart';

import 'pageview/DeviceScreen.dart';
import 'pageview/HomeScreen.dart';
import 'pageview/ProfileScreen.dart';
import 'pageview/SceneScreen.dart';
import 'pageview/SettingsScreen.dart';

class FloatingButtonViewTabBar extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<FloatingButtonViewTabBar>
    with SingleTickerProviderStateMixin {
  int _currentIndex = 0;

  final List<Widget> _children = [
    HomeScreen(),
    DeviceScreen(),
    SceneScreen(),
    ProfileScreen(),
    SettingsScreen(),
  ];

  late TabController _tabController;

  List<String> list = [];

  //生命周期函数:当组件初始化的时候就会触发
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _children.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('appbar'),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, //默认选中第几个
        type: BottomNavigationBarType.fixed,

        /// 选中时图标和文字的颜色
        selectedItemColor: Colors.redAccent,

        /// 未选中时图标和文字的颜色
        unselectedItemColor: Colors.grey,
        //选中变化回调函数
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        // items:  //List 底部导航条按钮集合
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.phone_iphone),
            label: '设备',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.dialpad),
            label: '场景',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: '设置',
          ),
        ],
      ),
      floatingActionButton: Container(
        height: 60, //调整FloatingActionButton的大小
        width: 60,
        padding: const EdgeInsets.all(5),
        margin: const EdgeInsets.only(top: 5), //调整FloatingActionButton的位置
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(30),
        ),
        child: FloatingActionButton(
            backgroundColor:
                _currentIndex == 2 ? Colors.redAccent : Colors.grey,
            child: const Icon(Icons.add),
            onPressed: () {
              setState(() {
                _currentIndex = 2;
              });
            }),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}
